<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/Home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>商品列表</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card class="box-card">
            <el-row>
                <el-col>
                    <el-button type="primary" @click="addsort">添加分类</el-button>
                </el-col>
            </el-row>
            <tree-table :data="catelist" :columns="columns" :selection-type="false" :expand-type="false"
            show-index stripe border>
                <template slot="isok" slot-scope="scope">
                    <i class="el-icon-success" v-if="scope.row.cat_deleted==false" style="color:green"></i>
                    <i class="el-icon-error" v-else style="color:red"></i>
                </template>
                <template slot="sort" slot-scope="scope">
                    <el-tag v-if="scope.row.cat_level==0">一级</el-tag>
                    <el-tag type="success" v-else-if="scope.row.cat_level==1">二级</el-tag>
                    <el-tag type="info" v-else>三级</el-tag>
                </template>
                <template slot="edit" slot-scope="scope">
                    <el-button type="primary" size="mini">编辑</el-button>
                    <el-button type="danger" size="mini" @click="deletecate(scope.row)">删除</el-button>
                </template>
            </tree-table>
            <!-- 分页区域 -->
            <el-pagination layout="prev, pager, next,sizes,total" :total="total" :page-sizes="[5, 10, 15]"
            @size-change="size_change" @current-change="current_change" :page-size='5'></el-pagination>
        </el-card>
        <!-- 添加分类对话框 -->
        <el-dialog
            title="修改用户"
            :visible.sync="sortdialogVisible"
            width="40%"
            @close="addcatreset">
            <el-form :model="addcateForm" :rules="addcaterules" ref="cateformref" label-width="100px">
                <el-form-item label="分类名称" prop="cat_name">
                    <el-input v-model="addcateForm.cat_name"></el-input>
                </el-form-item>
                <el-form-item label="父级分类">
                    <el-cascader :options="parentCateList" expand-trigger="hover"  :props="cascaderProps" v-model="selectedKeys"
                    @change="parentCateChanged" clearable change-on-select></el-cascader>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="sortdialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitaddcate">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    created() {
        this.getcatelist();
    },
    data() {
        return {
            categories:{
                type:"",
                pagenum:"1",
                pagesize:"5"
            },
            catelist:[],
            columns:[
                {
                    label:"分类名称",
                    prop:"cat_name" 
                },
                {
                    label:"是否有效",
                    type:"template",
                    template:"isok"
                },
                {
                    label:"排序",
                    type:"template",
                    template:"sort"
                },
                {
                    label:"操作",
                    type:"template",
                    template:"edit"
                }
            ],
            total:0,
            sortdialogVisible:false,
            addcateForm:{
                cat_pid:0,
                cat_name:"",
                cat_level:0,
            },
            cascaderProps: {
                value: 'cat_id',
                label: 'cat_name',
                children: 'children'
            },
            selectedKeys:[],
            parentCateList:[],
            addcaterules:{
                cat_name:[
                    { required: true, message: '请输入分类名称', trigger: 'blur' },
                    { min: 3, max: 10, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
            }
        }
    },
    methods:{
        getcatelist:async function() {
            const {data:res} = await this.$http.get("categories",{params:this.categories})
            this.catelist=res.data.result;
            this.total=res.data.total;
        },
        addsort:function() {
            this.sortdialogVisible=true;
            this.getParentCateList();
        },
        submitaddcate:function() {
            this.$refs.cateformref.validate(async valid => {
                if (!valid) return
                const { data: res } = await this.$http.post(
                'categories',
                this.addcateForm
                )

                if (res.meta.status !== 201) {
                return this.$message.error('添加分类失败！')
                }

                this.$message.success('添加分类成功！')
                this.getcatelist();
                this.sortdialogVisible = false
            })
        },
        addcatreset:function() {
            this.$refs.cateformref.resetFields();
            this.selectedKeys=[];
            this.addcateForm.cat_level=0;
            this.addcateForm.cat_pid=0;
        },
        // 获取父级分类的数据列表
        async getParentCateList() {
        const { data: res } = await this.$http.get('categories', {
            params: { type: 2 }
        })
        this.parentCateList = res.data
        },
        parentCateChanged:function() {
            if(this.selectedKeys.length>0) {
                this.addcateForm.cat_pid=this.selectedKeys[this.selectedKeys.length-1]
                //分类等级
                this.addcateForm.cat_level=this.selectedKeys.length;
                return;
            }
            else {
                this.addcateForm.cat_pid=0;
                this.addcateForm.cat_level=0;
            }
            
            
        },
        deletecate:async function(catinfo) {
            const {data:res} = await this.$http.delete(`categories/${catinfo.cat_id}`)
            if (res.meta.status != 200) {
                return this.$message.error('删除失败！')
                }

                this.$message.success('删除成功！')
                if(this.total%this.categories.pagesize==1) {
                    this.categories.pagenum--;
                    this.getcatelist();
                }
                else {
                    this.getcatelist();
                }
        },
        current_change:function(page) {
            this.categories.pagenum=page;
            this.getcatelist();
        },
        size_change:function(size) {
            this.categories.pagesize=size;
            this.getcatelist();
        }

    }
}
</script>

<style scoped>
* {
    margin: 0;
    padding: 0;
}
.el-breadcrumb {
    margin-left: 170px;
    margin-top: 20px;
    margin-bottom: 20px;
}
.box-card {
    width: 1200px;
    margin: 0 auto;
}
.el-button {
    margin-bottom: 10px;
}
.el-pagination {
    margin-top: 10px;
}
</style>